<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../sass/index.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="../css/bootstrap.css">
	<link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="../iconfunt/iconfont.css">
	<link rel="stylesheet" href="../css/detailsmusic.css">
	<link rel="stylesheet" href="../css/styles.css">
	<script src="../jquery-ui-1.10.2/jquery-1.9.1.js"></script>
	<script src="../jquery-ui-1.10.2/ui/jquery-ui.js"></script>
    <style>
        body{
            background: #fff;
        }
        .container{
            display: flex;
            flex-wrap: wrap;
            
        }
        .phone{
            width: 232px; 
            height: 352px;
            box-sizing: border-box;
            padding: 0 16px;
            margin: 0 10px 10px 0;
        }
        img{
            width: 100%;
        }
        p{
          margin: 8px 0;
        }
        .logout{
            display: none;
        }
    </style>
</head>
<body>
    <nav>
        <div class="banxin">
            <main class="s-sub">
                <ul>
                    <li><a href="http://172.168.20.103/HUAWEI/ALL/index.html">首页</a></li>
                    <li><a href="#">华为官网</a></li>
                    <li><a href="#">花粉俱乐部</a></li>
                    <li><a href="#">V码(优购码)</a></li>
                    <li><a href="#">企业购</a></li>
                    <li><a href="#">Select Regjon</a></li>
                    <li class="gdjc"><a href="#">更多精彩</a></li>
                </ul>
            </main>
            <main class="s-main">
                <li><a href="logon.html">请登录</a></li>
                <li class="logout" ><a href="javascript:document.cookie='phone=;expires=Thu, 01 Jan 1970 00:00:00 UTC;';location='index.html'">退出登录</a></li>
                <li><a href="parking.html">注册</a></li>
                <li><a href="">我的订单</a></li>
                <li class="s-main-lis"><a href="#">客户服务
                        <ul>
                            <li>服务中心</li>
                            <li>联系客服</li>
                        </ul>
                    </a></li>
                <li class="s-main-lis2"><a href="">网站导航
                        <!-- <div class="div1">
                    <article>
                        
                    </article>
                    <article></article>
                    <article></article>
                    <article></article>
                    <article></article>
                </div> -->
                    </a></li>
                <li><a href="">手机导航</a></li>
                <li><a href="http://172.168.20.103/HUAWEI/ALL/shopcart.html">购物车<span class="CART">(0)</span></a></li>

            </main>
        </div>
    </nav>
    <div class="container">
        <div class="phone">
            <a href="huawei-mate.html"> <img src="../images/HUAWEI Mate 30 5G.png" alt=""></a>
            <p>HUAWEI Mate 30 5G</p>
            <span class="money">&yen;5299</span>
            <p><span class="appraise">2</span>人评价 <span>100</span>%好评</p>    
        </div>
    </div>
 
    
   
  <script >
        $.ajax({
            url:"http://172.168.20.103/HUAWEI/ALL/allphp.php",
            data:"hide=mate",
            dataType:"JSONP",
            success:data=>{
                data.forEach(val=>{
                     var div=$(`<div class='phone'><a href="javascript:location='huawei-mate.html?id=${val.id}'"><img src=${val.src}></a>
                        <p>${val.name}</p>
                        <span class="money">${val.money}</span>
                        <p><span class="appraise">${val.appraise}</span>人评价 <span>99</span>%好评</p></div>`)
                    $(".container").append(div);
                })
            }
        })
       
  </script>
     <script>
        if (document.cookie.split("=").length == 2) {
            var str = document.cookie.split("=")[1];
            str = str.replace(/^(\d{3})(\d{6})(\d{2})$/, (a, b, c, d) => {
                return b + "******" + d
            })
            $("[href='logon.html']").html(str);
            $("[href='logon.html']").attr("href", "#");
            $(".logout").css("display", "inline");
            $("[href='parking.html']").css("display", "none");
        }
    </script>
    <script>
        var people = document.cookie.split("=")[1];
        var b = 0;
        $.ajax({
            url: "http://172.168.20.103/HUAWEI/ALL/allphp.php",
            data: "hide=cartplease&people=" + people,
            dataType: "JSONP",
            success: data => {
                data.forEach((val) => {
                    if (val.peoplenum == people) {
                        b++;  
                    }
                })
                $(".CART").html(`(${b})`);
            }
        })

    </script>

    
    
</body>
</html>